﻿@*
    供应商编辑页面
*@
@{
    ViewData["Title"] = "编辑供应商";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>编辑供应商</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="~/layui/css/layui.css">
    <style>
        body {
            background-color: #f2f2f2;
            padding: 10px;
        }

        .layui-card {
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
            max-width: 900px;
            margin: 0 auto;
        }

        .layui-card-header {
            font-size: 15px;
            font-weight: bold;
            height: 38px;
            line-height: 38px;
            border-bottom: 1px solid #f6f6f6;
            color: #333;
            border-radius: 2px 2px 0 0;
        }

        .form-container {
            padding: 15px 10px 0 10px;
        }

        .layui-form-item .required:before {
            content: '*';
            color: #FF5722;
            margin-right: 3px;
        }

        .layui-input, .layui-textarea {
            border-radius: 2px;
            height: 32px;
            line-height: 32px;
        }

        .layui-btn {
            border-radius: 2px;
            height: 32px;
            line-height: 32px;
            padding: 0 15px;
        }

        .layui-form-label {
            padding: 6px 10px;
            width: 80px;
        }
        
        .layui-input-block {
            margin-left: 110px;
        }

        .form-action-buttons {
            margin-top: 20px;
            text-align: center;
        }

        .form-item-title {
            border-left: 3px solid #009688;
            padding-left: 8px;
            margin: 15px 0 10px 0;
            font-weight: bold;
            font-size: 14px;
        }

        .layui-block {
            width: 100% !important;
        }

        .layui-input-inline {
            width: 220px !important;
        }

        .layui-textarea {
            min-height: 60px;
        }

        .tip-text {
            color: #999;
            font-size: 12px;
            margin-top: 3px;
        }
        
        .layui-form-item {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">
                <i class="layui-icon layui-icon-edit"></i> 编辑供应商
            </div>
            <div class="layui-card-body">
                <div class="form-container">
                    <form class="layui-form" lay-filter="supplierForm">
                        <div class="form-item-title">基本信息</div>

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label required">供应商编码</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="supplierCode" required lay-verify="required"
                                           placeholder="供应商编码" autocomplete="off" class="layui-input" disabled>
                                </div>
                                <div class="layui-form-mid">
                                    <div class="tip-text">编码为唯一标识，不可修改</div>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label required">供应商名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="supplierName" required lay-verify="required"
                                           placeholder="请输入供应商名称" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">供应商等级</label>
                                <div class="layui-input-inline">
                                    <select name="supplierGrade">
                                        <option value="">请选择等级</option>
                                        <option value="A">A级 - 战略供应商</option>
                                        <option value="B">B级 - 优质供应商</option>
                                        <option value="C">C级 - 合格供应商</option>
                                        <option value="D">D级 - 试用供应商</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">供应商评分</label>
                                <div class="layui-input-inline">
                                    <input type="number" name="supplierScore" placeholder="请输入供应商评分"
                                           autocomplete="off" class="layui-input" min="0" max="100">
                                </div>
                                <div class="layui-form-mid tip-text">0-100</div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">是否启用</label>
                                <div class="layui-input-inline" style="width: 150px !important;">
                                    <input type="radio" name="isNo" value="1" title="启用">
                                    <input type="radio" name="isNo" value="0" title="禁用">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">联系电话</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="supplierPhone" placeholder="请输入联系电话"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="form-item-title">其他信息</div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">供应商地址</label>
                            <div class="layui-input-block" style="width: calc(100% - 95px);">
                                <textarea name="supplierAdress" placeholder="请输入供应商地址" class="layui-textarea"></textarea>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">备注信息</label>
                            <div class="layui-input-block" style="width: calc(100% - 95px);">
                                <textarea name="context" placeholder="请输入备注信息" class="layui-textarea"></textarea>
                            </div>
                        </div>

                        <div class="layui-form-item form-action-buttons">
                            <button class="layui-btn" lay-submit lay-filter="formSubmit">保存</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            <button type="button" class="layui-btn layui-btn-normal" id="backBtn">返回列表</button>
                        </div>
                        
                        <!-- 隐藏字段 -->
                        <input type="hidden" name="Id" value="">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="~/layui/layui.js"></script>
<script>
    layui.use(['form', 'layer', 'jquery'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery;

        // 返回列表页面
        $('#backBtn').click(function () {
            window.location.href = '/Supplier/Index';
        });

        // 加载供应商信息
        var loadSupplier = function () {
            // 获取URL中的ID参数
            var id = getUrlParam('id');
            if (!id) {
                layer.msg('未找到供应商ID', { icon: 2 });
                return;
            }

            // 加载数据的loading效果
            var loadIndex = layer.load(1, { shade: [0.1, '#fff'] });

            $.ajax({
                url: '/Supplier/GetSupplierById',
                type: 'GET',
                data: { id: id },
                success: function (res) {
                    layer.close(loadIndex);
                    if (res.code === 0 && res.data) {
                        // 设置表单值
                        var supplierData = res.data;
                        $('input[name="Id"]').val(supplierData.id);
                        $('input[name="supplierCode"]').val(supplierData.supplierCode);
                        $('input[name="supplierName"]').val(supplierData.supplierName);
                        $('select[name="supplierGrade"]').val(supplierData.supplierGrade);
                        $('input[name="supplierScore"]').val(supplierData.supplierScore);
                        $('input[name="supplierPhone"]').val(supplierData.supplierPhone);
                        $('textarea[name="supplierAdress"]').val(supplierData.supplierAdress);
                        $('textarea[name="context"]').val(supplierData.context);
                        
                        // 设置单选按钮值
                        $('input[name="isNo"][value="' + supplierData.isNo + '"]').prop('checked', true);
                        
                        // 更新表单，重新渲染
                        form.render();
                    } else {
                        layer.msg(res.msg || '加载供应商数据失败', { icon: 2 });
                    }
                },
                error: function () {
                    layer.close(loadIndex);
                    layer.msg('加载供应商数据请求失败', { icon: 2 });
                }
            });
        };

        // 页面加载完成后获取供应商信息
        loadSupplier();

        // 表单提交
        form.on('submit(formSubmit)', function (data) {
            var loadIndex = layer.load(1, { shade: [0.1, '#fff'] });
            
            // 获取表单数据
            var formData = {
                Id: parseInt($('input[name="Id"]').val()) || 0,
                SupplierCode: $('input[name="supplierCode"]').val(),
                SupplierName: $('input[name="supplierName"]').val(),
                SupplierGrade: $('select[name="supplierGrade"]').val(),
                SupplierScore: parseInt($('input[name="supplierScore"]').val()) || 0,
                IsNo: parseInt($('input[name="isNo"]:checked').val()) || 0,
                SupplierPhone: $('input[name="supplierPhone"]').val(),
                SupplierAdress: $('textarea[name="supplierAdress"]').val(),
                Context: $('textarea[name="context"]').val()
            };
            
            console.log("提交的表单数据:", formData);

            $.ajax({
                url: '/Supplier/UpdateSupplier',
                type: 'POST',
                data: formData,
                success: function(res) {
                    layer.close(loadIndex);
                    if (res.code === 0) {
                        layer.msg('修改成功', {
                            icon: 1,
                            time: 1000
                        }, function() {
                            window.location.href = '/Supplier/Index';
                        });
                    } else {
                        layer.msg(res.msg || '修改失败', { icon: 2 });
                    }
                },
                error: function() {
                    layer.close(loadIndex);
                    layer.msg('操作请求失败', { icon: 2 });
                }
            });
            return false;
        });

        // 获取URL参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }
    });
</script>
</body>
</html>
